<template>
  <div>
    <el-button size="mini" type="primary" @click="editClick">{{
      operateType.edit
    }}</el-button>
    <el-form
      ref="formData"
      style="padding-top: 13px"
      class="base-pipeline-layout"
      label-width="130px"
      status-icon
      :inline="true"
    >
      <el-form-item
        :label="customer.setCustomerAgreementPrice"
        style="width: 100%"
      >
        <el-row
          ><el-col :span="18">
            <el-select
              v-model="customerInfo.agreementPriceType"
              :disabled="disabled"
              :placeholder="operateType.pleaseSelect"
            >
              <el-option
                v-for="item in priceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option> </el-select></el-col
          ><el-col :span="6">
            <el-link
              v-rights="'Edit'"
              type="primary"
              @click="isShowDialog = true"
              >{{ operateType.detail }}</el-link
            >
          </el-col></el-row
        >
      </el-form-item>

      <el-form-item :label="customer.setCustomerDiscount" prop="discountRate">
        <el-row
          ><el-col :span="18">
            <el-input
              v-model="customerInfo.discountRate"
              :disabled="disabled"
              autocomplete="off"
            ></el-input></el-col
          ><el-col :span="6">%</el-col></el-row
        >
      </el-form-item>
    </el-form>
    <span v-if="!disabled" slot="footer" class="base-dialog-footer">
      <el-button type="primary" @click="edit">{{ operateType.save }}</el-button>
      <el-button @click="disabled = true">{{ operateType.cancel }}</el-button>
    </span>
    <CustomerDetectionItemDetail
      v-if="isShowDialog"
      ref="CustomerDetectionItemDetail"
      :is-show-dialog.sync="isShowDialog"
      :edit-id="editId"
    />
  </div>
</template>
<script>
import CustomerDetectionItemDetail from "./CustomerDetectionItemDetail.vue";
import { getInfo, update } from "../../../api/SysBusiness/Customer";
export default {
  name: "CustomerDiscountRate",
  components: { CustomerDetectionItemDetail },
  props: {
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      disabled: true,
      isShowDialog: false,
      customerInfo: {},
      discountRate: 0,
      agreementPriceType: "firstAgreementPrice",
      priceList: [
        {
          name: this.$t("Customer.agreementPrice1"),
          value: "firstAgreementPrice",
        },
        {
          name: this.$t("Customer.agreementPrice2"),
          value: "secondAgreementPrice",
        },
        {
          name: this.$t("Customer.agreementPrice3"),
          value: "thirdAgreementPrice",
        },
      ],
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  mounted() {},
  created() {
    this.initdata();
  },
  methods: {
    editClick() {
      this.disabled = false;
    },
    edit() {
      update(this.customerInfo)
        .then((res) => {})
        .catch((res) => {});
    },
    initdata() {
      getInfo({ Id: this.editId })
        .then((res) => {
          this.customerInfo = res.data;
        })
        .catch((res) => {});
    },
    handleClick() {},

    // 关闭弹框
    handleClose() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    // 关闭客户弹框没保存
    handleCloseDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
    },
    handleCloseChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
    closedChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
  },
};
</script>

